<template>
  <div class="app-container">
    <div>
      <span>选择年份: </span>
      <el-date-picker
        style="width: 120px"
        v-model="year"
        type="year"
        value-format="yyyy"
        @change="yearProfit(year)"
      >
      </el-date-picker>
    </div>

    <div class="echart" id="mychart" :style="myChartStyle"></div>
  </div>
</template>

<script>
import * as echarts from "echarts";
import {yearProfitApi} from "@/api/apartment/profit";

export default {
  data() {
    return {
      year: '',
      xData: ["一月", "二月", "三月", "四月", "五月", "六月", "七月", "八月", "九月", "十月", "十一月", "十二月"],
      yData: [],
      myChartStyle: {float: "left", width: "900px", height: "350px"}
    }
  },
  mounted() {
    // 初始化当前年份
    const date = new Date().getFullYear();
    this.year = date.toString();

    this.yearProfit();
  },
  methods: {
    yearProfit(year) {
      const param = {
        'year': this.year
      }
      yearProfitApi(param).then(res => {
        this.yData = res.data;
        this.initEcharts();
      })
    },

    initEcharts() {
      // 基本柱状图
      const option = {
        xAxis: {
          data: this.xData
        },
        yAxis: {},
        series: [
          {
            type: "bar",  //形状为柱状图
            data: this.yData,
            label: {      // 图形上的文本标签，可用于说明图形的一些数据信息，比如值，名称等。
              show: true, // 开启显示
              color: '#060270', // 文字的颜色。
              width: 30,        // 文本显示宽度。
              height: 20,       // 文本显示高度。
              position: 'top',  // 标签的位置。
              offset: [0, -6],  // 是否对文字进行偏移。
              verticalAlign: 'middle', // 文字垂直对齐方式，默认自动。
            }
          }
        ]
      };

      const myChart = echarts.init(document.getElementById("mychart"));
      myChart.setOption(option);
      //随着屏幕大小调节图表
      window.addEventListener("resize", () => {
        myChart.resize();
      });

    },

  }

}
</script>

<style>

</style>
